<template>
  <div v-if="announcements.length > 0" class="top-announcements-container">
    <div class="announcements-bar">
      <div class="announcement-icon">
        <el-icon :size="20"><Bell /></el-icon>
      </div>
      <div class="announcements-content">
        <el-carousel
          v-if="announcements.length > 1"
          :interval="5000"
          arrow="never"
          indicator-position="none"
          height="40px"
          direction="vertical"
          class="announcement-carousel"
        >
          <el-carousel-item
            v-for="announcement in announcements"
            :key="announcement.id"
            class="carousel-item"
          >
            <div
              class="announcement-item"
              @click="handleAnnouncementClick(announcement)"
            >
              <el-tag
                :type="utils.getLevelInfo(announcement.level).tagType"
                size="small"
                class="level-tag"
              >
                {{ announcement.levelName }}
              </el-tag>
              <span class="announcement-title">{{ announcement.title }}</span>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div
          v-else
          class="announcement-item"
          @click="handleAnnouncementClick(announcements[0])"
        >
          <el-tag
            :type="utils.getLevelInfo(announcements[0].level).tagType"
            size="small"
            class="level-tag"
          >
            {{ announcements[0].levelName }}
          </el-tag>
          <span class="announcement-title">{{ announcements[0].title }}</span>
        </div>
      </div>
      <div class="announcement-action">
        <el-button text @click="handleViewMore">
          查看更多
          <el-icon><ArrowRight /></el-icon>
        </el-button>
      </div>
    </div>

    <!-- 公告详情对话框 -->
    <AnnouncementDetailDialog
      v-model:visible="detailDialogVisible"
      :announcement-id="selectedAnnouncementId"
      @read="handleAnnouncementRead"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { Bell, ArrowRight } from "@element-plus/icons-vue";
import {
  getTopAnnouncementsApi,
  UserAnnouncementUtils,
  type AnnouncementInfo
} from "@/api/user-announcement";
import AnnouncementDetailDialog from "./AnnouncementDetailDialog.vue";

// 工具类
const utils = UserAnnouncementUtils;
const router = useRouter();

// 状态
const announcements = ref<AnnouncementInfo[]>([]);
const detailDialogVisible = ref(false);
const selectedAnnouncementId = ref<number>();

// 加载置顶公告
const loadTopAnnouncements = async () => {
  try {
    const response = await getTopAnnouncementsApi();
    if (response.code === 200 && response.data) {
      announcements.value = response.data;
    }
  } catch (error: any) {
    console.error("加载置顶公告失败:", error);
    // 不显示错误消息，静默失败
  }
};

// 点击公告
const handleAnnouncementClick = (announcement: AnnouncementInfo) => {
  selectedAnnouncementId.value = announcement.id;
  detailDialogVisible.value = true;
};

// 查看更多
const handleViewMore = () => {
  router.push("/user/messages");
};

// 公告已读回调
const handleAnnouncementRead = (id: number) => {
  const announcement = announcements.value.find(item => item.id === id);
  if (announcement) {
    announcement.read = true;
  }
};

// 组件挂载时加载数据
onMounted(() => {
  loadTopAnnouncements();
});

// 暴露刷新方法供父组件调用
defineExpose({
  refresh: loadTopAnnouncements
});
</script>

<style scoped lang="scss">
@keyframes ring {
  0%,
  100% {
    transform: rotate(0deg);
  }

  10%,
  30% {
    transform: rotate(-10deg);
  }

  20%,
  40% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(0deg);
  }
}

/* 响应式设计 */
@media (width <= 768px) {
  .top-announcements-container {
    margin-bottom: 16px;

    .announcements-bar {
      padding: 10px 16px;
      border-radius: 8px;

      .announcement-icon {
        margin-right: 12px;

        .el-icon {
          font-size: 18px;
        }
      }

      .announcements-content {
        .announcement-item {
          gap: 8px;

          .announcement-title {
            font-size: 14px;
          }
        }
      }

      .announcement-action {
        margin-left: 12px;

        .el-button {
          padding: 6px 12px;
          font-size: 13px;

          :deep(span) {
            display: none;
          }

          .el-icon {
            margin-left: 0;
          }
        }
      }
    }
  }
}

@media (width <= 480px) {
  .top-announcements-container {
    .announcements-bar {
      padding: 8px 12px;

      .announcement-icon {
        margin-right: 8px;

        .el-icon {
          font-size: 16px;
        }
      }

      .announcements-content {
        .announcement-item {
          .level-tag {
            display: none;
          }

          .announcement-title {
            font-size: 13px;
          }
        }
      }

      .announcement-action {
        margin-left: 8px;

        .el-button {
          padding: 4px 8px;
        }
      }
    }
  }
}

.top-announcements-container {
  width: 100%;
  margin-bottom: 20px;

  .announcements-bar {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(135deg, #e0f2ff 0%, #bae6ff 100%);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgb(56 189 248 / 20%);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 16px rgb(56 189 248 / 30%);
      transform: translateY(-2px);
    }

    .announcement-icon {
      flex-shrink: 0;
      margin-right: 16px;
      color: #0284c7;
      animation: ring 2s ease-in-out infinite;

      .el-icon {
        display: block;
      }
    }

    .announcements-content {
      flex: 1;
      min-width: 0;
      overflow: hidden;

      .announcement-carousel {
        :deep(.el-carousel__container) {
          height: 40px;
        }

        .carousel-item {
          display: flex;
          align-items: center;
          height: 100%;
        }
      }

      .announcement-item {
        display: flex;
        gap: 12px;
        align-items: center;
        cursor: pointer;
        transition: opacity 0.3s ease;

        &:hover {
          opacity: 0.9;
        }

        .el-tag {
          display: inline-flex !important;
          flex-shrink: 0;
          gap: 4px;
          align-items: center !important;
          justify-content: center;
          height: 24px;
          padding: 0 8px !important;
          font-size: 13px !important;
          font-weight: 500 !important;
          line-height: 1 !important;

          :deep(span) {
            display: flex;
            align-items: center;
            font-size: 13px !important;
            font-weight: 500 !important;
            line-height: 1 !important;
          }

          .el-icon {
            display: flex;
            align-items: center;
            margin: 0;
            font-size: 13px !important;
          }
        }

        .announcement-title {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 15px;
          font-weight: 600;
          line-height: 1.5;
          color: #0c4a6e;
          white-space: nowrap;
        }
      }
    }

    .announcement-action {
      flex-shrink: 0;
      margin-left: 16px;

      .el-button {
        padding: 8px 16px;
        font-weight: 500;
        color: #0284c7;
        transition: all 0.3s ease;

        &:hover {
          background-color: rgb(14 165 233 / 10%);
        }

        .el-icon {
          margin-left: 4px;
        }
      }
    }
  }
}
</style>
